<template>
  <div class="home">
    <div class="hero-section">
      <h1>中华书法艺术展览</h1>
      <p class="subtitle">传承千年文化，展现笔墨风华</p>
      <button class="cta-button" @click="goToExhibition">进入展览</button>
    </div>

    <div class="featured-section">
      <h2>精选作品</h2>
      <div class="featured-grid">
        <div class="featured-item" v-for="item in featuredWorks" :key="item.id">
          <img :src="item.image" :alt="item.title">
          <div class="item-info">
            <h3>{{ item.title }}</h3>
            <p>{{ item.artist }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="about-section">
      <h2>关于我们</h2>
      <p>本次书法展览汇集了来自全国各地书法名家的精品力作，展示了中国书法艺术的深厚底蕴和时代风采。展览分为古代经典、近现代名家和当代新锐三个板块，共展出作品200余件。</p>
      <button class="secondary-button" @click="goToAbout">了解更多</button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const featuredWorks = [
  {
    id: 1,
    title: '兰亭序',
    artist: '王羲之',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
  },
  {
    id: 2,
    title: '祭侄文稿',
    artist: '颜真卿',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
  },
  {
    id: 3,
    title: '黄州寒食诗帖',
    artist: '苏轼',
    image: 'https://img.dpm.org.cn/Uploads/Picture/2017/04/21/s58f9b14df3f14.jpg'
  }
]

const goToExhibition = () => {
  router.push('/exhibition')
}

const goToAbout = () => {
  router.push('/about')
}
</script>

<style scoped>
.home {
  width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero-section {
  text-align: center;
  padding: 4rem 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  color: white;
  margin-bottom: 3rem;
}

.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta-button {
  background-color: #fff;
  color: #667eea;
  border: none;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.featured-section {
  margin-bottom: 3rem;
}

.featured-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.featured-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.featured-item:hover {
  transform: translateY(-10px);
}

.featured-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.item-info {
  padding: 1.5rem;
  background: white;
}

.item-info h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.3rem;
}

.item-info p {
  margin: 0;
  color: #666;
}

.about-section {
  text-align: center;
  padding: 3rem 2rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  margin-bottom: 3rem;
}

.about-section h2 {
  margin-bottom: 1.5rem;
}

.about-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto 2rem;
}

.secondary-button {
  background-color: #667eea;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-button:hover {
  background-color: #5a6fd8;
  transform: translateY(-3px);
}
</style>